<template>
    <div>
        <div class="cons">
            <div class="pc-1">
                <div class="pu-con pc-11">
                    <div>
                        <router-link to="/home">
                            <img src="../../../assets/g-14.png" alt />
                        </router-link>
                        <router-link to="/gxzd/home">
                            <img src="../../../assets/g-17.png" alt />
                        </router-link>
                    </div>
                    <div>
                        <img src="../../../assets/g-18.png" alt />
                    </div>
                </div>
            </div>
            <div style="height:50px"></div>
            <div class="pc-2 pu-con">
                <div class="pc-21">
                    <h1 class="pc-title">填写信息 由专人审核发布</h1>
                    <div class="pc-211">
                        <el-form
                            :model="formData"
                            :rules="rules"
                            ref="formData"
                            label-width="100px"
                            class="demo-ruleForm"
                        >
                            <div class="form-con">
                                <el-form-item label="标题" prop="title">
                                    <el-input v-model="formData.title"></el-input>
                                </el-form-item>
                            </div>
                            <div class="form-con">
                                <el-form-item label="公司名称" prop="company">
                                    <el-input v-model="formData.company"></el-input>
                                </el-form-item>
                            </div>
                            <div class="form-con" @click="dialogShow =true">
                                <el-form-item label="媒体类型" prop="mediaName">
                                    <el-input
                                        v-model="formData.mediaName"
                                        placeholder="请选择媒体类型"
                                        readonly
                                    ></el-input>
                                </el-form-item>
                            </div>
                            <div class="form-con">
                                <el-form-item label="广告预算" prop="budget">
                                    <el-input v-model="formData.budget"></el-input>
                                </el-form-item>
                                <p>万元</p>
                            </div>
                            <div class="form-con">
                                <el-form-item label="所在地区" prop="area">
                                    <el-cascader
                                        :options="options"
                                        v-model="formData.area"
                                        :separator="' '"
                                    ></el-cascader>
                                </el-form-item>
                            </div>
                            <div class="form-con">
                                <el-form-item label="详细地址" prop="address">
                                    <el-input v-model="formData.address"></el-input>
                                </el-form-item>
                            </div>
                            <div class="form-con">
                                <el-form-item label="联系电话" prop="phone">
                                    <el-input v-model="formData.phone"></el-input>
                                </el-form-item>
                            </div>
                            <div class="form-con">
                                <el-form-item label="商家介绍" prop="content">
                                    <el-input type="textarea" v-model="formData.content"></el-input>
                                </el-form-item>
                            </div>
                            <div class="form-con">
                                <el-form-item label="媒体详情" prop="brief">
                                    <el-input type="textarea" v-model="formData.brief"></el-input>
                                </el-form-item>
                            </div>
                            <div class="form-con">
                                <el-form-item label="资源图" prop="img1">
                                    <el-upload
                                        action="http://www.jssggxh.com:8082/tianti_module_interface//file/fitment/upload"
                                        list-type="picture-card"
                                        :on-preview="handlePictureCardPreview"
                                        :on-remove="handleRemove"
                                        :on-success="handleSuccess"
                                        :before-upload="beforeAvatarUpload"
                                        :on-exceed="handleExceed"
                                        :limit="4"
                                        multiple
                                    >
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <el-dialog :visible.sync="dialogVisible">
                                        <img width="100%" :src="dialogImageUrl" alt />
                                    </el-dialog>
                                </el-form-item>
                            </div>
                        </el-form>
                    </div>
                    <div class="pc-212">
                        <a href="JavaScript:;" @click="onRelease">发布</a>
                        <router-link to="/gxzd/home">取消</router-link>
                    </div>
                </div>
                <div class="pc-22">
                    <div>
                        <div class="pc-221">
                            <h1 class="pc-title">最新求购信息</h1>
                        </div>
                        <div class="pc-222">
                            <router-link
                               :to="{path:'/gxzd/huwai/dec',query:{data:JSON.stringify(item) }}"
                                v-for="(item,index) in newsList.slice(0,10)"
                                :key="index"
                            >{{item.title}}</router-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <com-foot></com-foot>
        <div class="dialog" v-if="dialogShow">
            <div class="mask" @click="onCloseDialog"></div>
            <div>
                <div class="box">
                    <div class="box-1">
                        <span>
                            <p>
                                请选择媒体类型
                                <strong>(最多选择3个)</strong>
                            </p>
                            <i class="el-icon-close" @click="onCloseDialog"></i>
                        </span>
                        <div class="box-con">
                            <div>
                                <div class="box-left">
                                    <div
                                        :class="curIndex==index?'box-left-on':''"
                                        v-for="(item,index) in media_type"
                                        :key="index"
                                        @click="onBoxLeft(item.name,index)"
                                    >{{ item.name }}</div>
                                </div>
                                <div class="box-right">
                                    <p
                                        v-for="(item,index) in media_type[curIndex].children"
                                        :key="index"
                                        :class="boxRightList.indexOf( boxType + '-' + item.name)>=0?'box-left-on':''"
                                        @click="onBoxRight(item.name)"
                                    >{{ item.name }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box-2">
                        <el-button type="success" @click="onFixMedia">确定</el-button>
                        <el-button type="info" @click="onCloseDialog">取消</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import options from "../../../utils/select_area";
import comFoot from '@/components/com-foot'
import media_type from '@/utils/media_type'
import { validPhone, validEmpty } from '@/utils/validate'

import _ from 'underscore'
export default {
    components: {
        comFoot
    },
    filters: {
        pattime(value) {
            return value.slice(0, 10)
        }
    },
    data() {
        const validateCode = (rule, value, callback) => {
            if (!value || value.length === 0) {
                callback(new Error('请输入验证码'))
            }
            else if (value != this.identifyCode) {
                callback(new Error('验证码错误'))
            }
            else {
                callback()
            }
        }
        const validateBudget = (rule, value, callback) => {
            var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
            if (!value || value.length === 0) {
                callback(new Error('请输入预算金额'))
            }
            else if (!reg.test(value)) {
                callback(new Error('请输入正确金额，最多小数点两位'))
            }
            else {
                callback()
            }
        }
        const validateUsername = (rule, value, callback) => {
            if (validEmpty(value)) {
                callback(new Error('手机号不能为空'))
            }
            else if (!validPhone(value)) {
                callback(new Error('请输入正确的手机号'))
            } else {
                callback()
            }
        }
        return {
            curIndex: 0,
            boxRightList: [],
            dialogShow: false,
            dialogImageUrl: '',
            dialogVisible: false,
            identifyCode: "",
            options: options,
            selectedOptions: [],
            formData: {
                img1: []
            },
            rules: {
                title: [
                    { required: true, message: '请输入详细地址', trigger: 'blur' },
                ],
                company: [
                    { required: true, message: '请输入公司名称', trigger: 'blur' },
                ],
                mediaName: [
                    { required: true, message: '请选择媒体类型', trigger: 'blur' },
                ],
                budget: [
                    { required: true, validator: validateBudget, trigger: 'blur' },
                ],
                area: [
                    { required: true, message: '请选择所在地区', trigger: 'change' }
                ],
                address: [
                    { required: true, message: '请输入详细地址', trigger: 'blur' },
                ],
                content: [
                    { required: true, message: '请输入商家介绍', trigger: 'blur' },
                ],
                brief: [
                    { required: true, message: '请输入媒体详细', trigger: 'blur' },
                ],

                phone: [
                    { required: true, validator: validateUsername, trigger: 'blur' },
                ],
                img1: [
                    { required: true, message: '请上传资源图片', trigger: 'blur' },
                ]
            },
            boxType: '',
            media_type: media_type,
            newsList: []
        }
    },
    created() {
        this.boxType = '户外'
        this.getPageSupplyDemand()
    },
    mounted() {
        // this.props =
    },
    methods: {
        async getPageSupplyDemand() {
            const data = { type: 0, currentPage: 1, pageSize: 10 }
            const res = await this.$store.dispatch('access/getPageSupplyDemand', data)
            console.log(res)
            this.newsList = res.list
        },
        handleExceed(files, fileList) {
            this.$message.error('上传图片最多只能4张!');
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isPNG = file.type === 'image/png';
            if (!isJPG && !isPNG) {
                this.$message.error('上传图片只能是 JPG或者PNG 格式!');
                return isJPG && isPNG;
            }
        },
        handleSuccess(res) {
            if (res.code == 200) {
                this.formData.img1.push(res.data.url)
            }
        },
        handleRemove(file, fileList) {
            let index = this.formData.img1.indexOf(file.response.data.url)
            this.formData.img1.splice(index, 1)
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        onRelease() {
            this.$refs.formData.validate(vaild => {
                if (vaild) {
                    this.setSaveSupplyDemand()
                }
            })
        },

        async setSaveSupplyDemand() {
			this.formData.adType = 1

            this.formData.area = this.formData.area.join("-")
			this.formData.img1 = this.formData.img1.join(",")
				console.log(this.formData)
            const res = await this.$store.dispatch('access/setSaveSupplyDemand', this.formData)
            this.$message({
                message: '信息提交成功',
                type: 'success'
            });
            this.$router.push('/gxzd/home')
        },
        onFixMedia() {

            if (this.boxRightList.length > 0) {
                // this.boxRightList.splice(0, 0, this.boxType)
                this.formData.mediaName = this.boxRightList.join(",")
            }
            this.boxRightLis = []
            this.curIndex = 0
            this.dialogShow = false
        },
        onCloseDialog() {
            this.boxRightLis = []
            this.curIndex = 0
            this.dialogShow = false
        },
        onBoxLeft(data, index) {
            this.curIndex = index
            this.boxType = data
            this.boxRightList = []
        },
        onBoxRight(data) {
            let cIndex = this.boxRightList.indexOf(this.boxType + '-' + data)
            if (cIndex >= 0) {
                this.boxRightList.splice(cIndex, 1)
                return
            }
            if (this.boxRightList.length > 2) {
                this.$message({
                    message: '媒体类型，最多选择3个',
                    type: 'warning'
                });
                return
            }
            data = this.boxType + '-' + data
            this.boxRightList.push(data)
            this.boxRightList = _.uniq(this.boxRightList)
        },
        uncultivated() {
            this.$message({
                message: '功能暂未开放，敬请期待',
                type: 'warning'
            });
        },
    }
}
</script>

<style scoped>
@import "./sell.css";
</style>
